<template>
  <div class="app-container">
    <div style="padding-bottom: 10px">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item prop="keyWord"  style="width: 100%;">
                <el-input
                  v-model="queryParams.keyWord"
                  placeholder="事项名称"
                  clearable
                  @keyup.enter.native="handleQuery"
                  suffix-icon="search"
                  :suffix-icon-click="handleQuery"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item prop="isKeyWork" style="width: 100%;" >
                <el-select v-model="queryParams.isKeyWork" placeholder="请选择是否为重点工作" clearable>
                  <el-option v-for="item in matter_work_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item prop="isTimeOut"  style="width: 100%;">
                <el-select v-model="queryParams.isTimeOut" placeholder="请选择是否超期" clearable>
                  <el-option v-for="item in matter_overdue" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="4">
                <el-button type="primary" icon="search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <ElLine :title="'关注列表'" style="margin-bottom: 10px;"></ElLine>
        <el-table v-loading="loading" :data="matterList">
          <el-table-column min-width="3%" label="序号" align="center" type="index"/>
          <!-- <el-table-column min-width="15%" label="事项名称" align="left" prop="matterName">
            <template #default="scope">
              <el-text type="primary" style="cursor: pointer" @click="handleView(scope.row)">{{ scope.row.matterName }}</el-text>
            </template>
          </el-table-column> -->
          <el-table-column  min-width="10%" label="事项名称" align="left" prop="matterName">
            <template #default="{ row }">
              <el-text type="primary" style="cursor: pointer" @click="getInto(row)">{{ row.matterName }}</el-text>
            </template>
          </el-table-column>
          <!-- <el-table-column min-width="15%" label="当前进展" align="center" prop="em1"/> -->
          <!-- <el-table-column min-width="8%" label="是否重要工作" align="center" prop="isKeyWork">
            <template #default="scope">
              <dict-tag :options="matter_work_type" :value="scope.row.isKeyWork"/>
            </template>
          </el-table-column> -->
          <el-table-column min-width="8%" label="事项完成期限" align="center" prop="completionDeadline">
            <template #default="scope">
              <span>{{ parseTime(scope.row.completionDeadline, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="8%" label="负责人" align="center" prop="matterResponsible"/>
          <el-table-column min-width="8%" label="关联人" align="center" prop="em2"/>
          <el-table-column min-width="8%" label="关注操作" align="center">
            <template #default="scope">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="点击取消关注"
                placement="right"
              >
                <el-button type="success" :icon="Star" circle @click="cancelClick(scope.row.matterId)"/>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />

    </div>
  </div>

</template>

<script setup name="MyCare">
import {listCare, delCare} from "@/api/care/care";
import { Star } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance();
const { matter_work_type, matter_overdue } = proxy.useDict('matter_work_type', 'matter_overdue');
const emit = defineEmits(['getInto']);
const matterList = ref([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    isKeyWork: null, //是否重要工作
    isTimeOut: null, //是否超期
    keyWord: null // 关键词
  }
});

const { queryParams } = toRefs(data);

function getList(){
  loading.value = true;
  listCare(queryParams.value).then((response) => {
    matterList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    isKeyWork: null, //是否重要工作
    isTimeOut: null, //是否超期
    keyWord: null // 关键词
  }
  handleQuery();
}

function getInto(row){
  emit('getInto', row);
}

function cancelClick(matterId){
  delCare({matterId: matterId}).then((response) =>{
    proxy.$modal.msgSuccess("取消关注成功");
    getList();
  })
}

getList();

</script>
<style scoped>
.app-container {
  padding: 15px;
}
</style>
